<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue中的动画封装</title>
  <script src="vue.js"></script>
  <style>
      /*.v-enter,.v-leave-to{*/
        /*opacity: 0;*/
      /*}*/
      /*.v-enter-active,.v-leave-active{*/
        /*transition:opacity 2s;*/
      /*}*/
  </style>
</head>
<body>
<div id="app">
  <fade :show="show">
    <div>hello world</div>
  </fade>
  <fade :show="show">
    <h1>hello world</h1>
  </fade>
  <button @click="handelBtnClick">change</button>
</div>
<script>
  Vue.component('fade',{
    props:['show'],
    template:'<transition @before-enter="handleBeforeEnter" @enter="handleEnter">' +
                 '<slot v-if="show"></slot>' +
              '</transition>',
    methods:{
      handleBeforeEnter:function(el){
        el.style.color='red'
      },
      handleEnter:function(el,done){
        setTimeout(()=>{
          el.style.color='green'
          done()
        },3000)
      }
    }
  })
  var vm=new Vue({
    el:"#app",
    data:{
      show:true
    },
    methods:{
      handelBtnClick:function(){
        this.show=!this.show
      }
    }
  })
</script>
</body>
</html>
